<template>
  <div class="customer_table">
    <el-table
      :data="tableInfo.data"
      :highlight-current-row="true"
      border
      height="521"
      :row-key="getRowKey"
      :header-cell-style="{ background: '#f5f5f5' }"
      @selection-change="handleSelectionChange"
    >
      <el-table-column v-if="selection" type="selection" width="55">
      </el-table-column>
      <el-table-column
        v-for="(item, index) in tableInfo.column"
        :key="index"
        :prop="item.prop"
        :label="item.label"
        :width="item.width || 'auto'"
        :sortable="item.sortable"
        align="center"
        :fixed="item.fixed"
      >
        <template slot-scope="scope">
          <div v-if="item.type === 'index'">
            <span>{{ scope.$index + 1 }}</span>
          </div>
          <!--          操作区-->
          <div v-else-if="item.prop == 'job_status'">
            <span>{{scope.row.job_status == 0 ? "——":""}}</span>
            <span>{{scope.row.job_status == 1 ? "待执行":""}}</span>
            <span class="blue">{{scope.row.job_status == 2 ? "执行中":""}}</span>
            <span class="org">{{scope.row.job_status == 3 ? "暂停":""}}</span>
            <span class="red">{{scope.row.job_status == 4 ? "中止":""}}</span>
            <span class="green">{{scope.row.job_status == 5 ? "已完成":""}}</span>
          </div>
          <div v-else-if="item.prop === 'action'" class="operation">
            <template v-if="item.type === 'PatrolSceneManagement'">
              <el-button @click="edit(scope.row)" type="text" size="small"
                >修改</el-button
              >
              <el-button @click="deleteRow(scope.row)" type="text" size="small"
                >删除</el-button
              >
              <el-button
                @click="viewDetails(scope.row)"
                type="text"
                size="small"
                >查看详情</el-button
              >
              <el-button
                @click="createdTask(scope.row)"
                type="text"
                size="small"
                >新建任务</el-button
              >
            </template>
            <template
              v-else-if="item.type === 'PatrolInspectionTaskManagement'"
            >
              <el-button
                @click="actionClick(scope.row, 'taskSwitch')"
                type="text"
                size="small"
                :disabled="scope.row.job_issued_status == 0 ? false:true"
                >下发</el-button
              >
              <el-button
                @click="actionClick(scope.row, 'start')"
                type="text"
                size="small"
                :disabled="(scope.row.job_issued_status == 1 && (scope.row.job_status == 1 || scope.row.job_status == 4 || scope.row.job_status == 5)) ? false: true"
                >启动</el-button
              >
              <el-button
                @click="actionClick(scope.row, 'pause')"
                type="text"
                size="small"
                :disabled="(scope.row.job_issued_status == 1 && scope.row.job_status == 2) ? false: true"
                >暂停</el-button
              >
              <el-button
                @click="actionClick(scope.row, 'continue')"
                type="text"
                size="small"
                :disabled="(scope.row.job_issued_status == 1 && scope.row.job_status == 3) ? false: true"
                >继续</el-button
              >
              <el-button
                @click="actionClick(scope.row, 'returnVoyage')"
                type="text"
                disabled
                >一键返航</el-button
              >
              <el-button
                @click="actionClick(scope.row, 'details')"
                type="text"
                size="small"
                >详情</el-button
              >
              <el-button
                @click="actionClick(scope.row, 'delete')"
                type="text"
                size="small"
                :disabled="(scope.row.job_issued_status == 0 || (scope.row.job_issued_status == 1 && scope.row.job_status == 1)) ? false: true"
                >删除</el-button
              >
            </template>
          </div>
          <div v-else>
            {{ scope.row[item.prop] }}
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "CustomerTable",
  props: {
    tableInfo: {
      type: Object,
      default: () => {},
    },
    selection: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  methods: {
    edit(row) {
      this.$emit("edit", row);
    },
    deleteRow(row) {
      this.$emit("deleteRow", row);
    },
    viewDetails(row) {
      this.$emit("viewDetails", row);
    },
    createdTask(row) {
      // console.log(row);
      this.$router.push({
        path: `/ScenarioTaskManagementAdd?scenario_id=${row.scenario_id}`,
      });
      // this.$emit('createdTask', row)
    },
    actionClick(row, type) {
      this.$emit("actionClick", row, type);
    },
    handleSelectionChange(val) {
      this.$emit("handleSelectionChange", val);
    },
    getRowKey(row) {
      console.log(row, 'row22');
      return row.robotNumber;
    },
  },
};
</script>

<style lang="scss" scoped>
/deep/ .el-table__header {
  .el-table__cell {
    background-color: #f6f6f6;
    color: rgba(0, 0, 0, 0.85);
    font-size: 14px;
  }
}

/deep/ .el-button {
  font-size: 14px;
}
/deep/ .el-button.is-disabled {
  color: #c0c4cc !important;
}

.blue {
  color: #409eff;
}
.org {
  color: #f59a23;
}
.red {
  color: red;
}
.green {
  color: #70b603;
}
</style>
